{% extends "v2/layout.html" %}

{% block title %}{{ album }} - grid view{% endblock %}

{% block extrahead %}
<script src="{{ url_for('admin.static_files', filename='jquery.js') }}"></script>
<script src="{{ url_for('admin.static_files', filename='jquery.blockUI.js') }}"></script>
<script src="{{ url_for('admin.static_files', filename='showoffadmin.js') }}"></script>
{% endblock %}

{% block body %}
<h1><a href="{{ url_for('admin.show_album', album=album) }}">{{ album }}</a></h1>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}

<div class="well">
    <div class="row">
        <div class="col-md-6">
            <ul>
                <li>authentication required:
                    <span id="toggle_show">
                        <a href="#" class="toggle-bool" data-setting="require_authentication" data-value="{{ show.get_setting('require_authentication') }}"></a>
                    </span>
                </li>
                <li>show album in reverse order:
                    <span id="toggle_reverse">
                        <a href="#" class="toggle-bool" data-setting="reverse" data-value="{{ show.get_setting('reverse') }}"></a>
                    </span>
                </li>
		        <li><a href="{{ url_for('admin.show_edit_users', album=album) }}">Edit users</a></li>
                <li><a id="rotate-all-images" href="#">Rotate all images based on exif info</a></li>
            </ul>
        </div>
        <div class="col-md-6">
            <ul>
                <li><a href="{{ url_for('admin.add_all_images_to_show', album=album) }}">Add all images to show</a></li>
                <li><a href="{{ url_for('admin.sort_show_by_exifdate', album=album) }}">Sort show by exifdate</a></li>
                <li><a href="{{ url_for('admin.sort_show_by_filename', album=album) }}">Sort show by filename</a></li>
                <li><a href="{{ url_for('admin.show_index') }}">Other albums</a><br>
            </ul>
        </div>
    </div>
</div>

{% include "v2/_paginator.html" %}
<div class="clearfix"></div>
<hr>

<div class="grid-container">
    {% for filename in files %}
    <div class="grid-item col-md-4{% if filename in show.data['files'] %} published{% endif %}">
        <a class="grid-item-image"
           href="{{ url_for('admin.image_page', album=album, filename=filename) }}" title="{{ filename }}">
            <img id="img-{{ loop.index }}" src="{{ url_for('admin.show_image', album=album, filename=filename, size=config.GRID_SIZE) }}" alt="{{ filename }}" data-filename="{{ filename }}">
        </a>
        <div>publish:
            <a href="#" class="toggle-publish" data-filename="{{ filename }}" data-value="{% if filename in show.data['files'] %}yes{% else %}no{% endif %}"></a>
        </div>
        <div>rotate:
            <a href="#" class="rotate" data-steps="1" data-index="{{ loop.index }}">¼</a> &raquo;
            <a href="#" class="rotate" data-steps="2" data-index="{{ loop.index }}">½</a> &raquo;
            <a href="#" class="rotate" data-steps="3" data-index="{{ loop.index }}">¾</a>
        </div>
    </div>
    {% endfor %}
</div>

<div class="clearfix"></div>
{% include "v2/_paginator.html" %}

<div id="footer"><hr>&copy; 2010-2014 Jochem Kossen</div>

<script>
    $(document).ready(function() {
    var cfg = {
    'base_url': '{{ url_for('admin.show_index') }}',
    'album': '{{ album }}'
    };

    var images = [ {% for filename in all_files %}'{{ filename }}'{% if not loop.last %}, {% endif %}{% endfor %} ];

    SHOWOFFADMIN.init(cfg, images);
    });
</script>
{% endblock %}
